<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <style>
        /**创建一个叫 smaller-img 的 CSS class，并用它来设置图片宽度为 100px。*/
        .smaller-img {
            width: 100px;
        }

        /*创建一个名为 thick-green-border 的 class， 该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框。 将这个 class 应用于你的猫图。*/
        .thick-green-border {
            border: 10px solid green;
        }

        .red-text {
            color: red;
        }

        h2 {
            font-family: Lobster, monospace;
        }

        p {
            font-size: 16px;
            font-family: monospace;
        }
    </style>

    <h2 class="red-text">CatPhotoApp</h2>
    <main>
        <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

        <a href="#"><img class="smaller-img thick-green-border" src="cat.jpg"
                         alt="A cute orange cat lying on its back."></a>

        <div>
            <p>Things cats love:</p>
            <ul>
                <li>cat nip</li>
                <li>laser pointers</li>
                <li>lasagna</li>
            </ul>
            <p>Top 3 things cats hate:</p>
            <ol>
                <li>flea treatment</li>
                <li>thunder</li>
                <li>other cats</li>
            </ol>
        </div>

        <form action="https://freecatphotoapp.com/submit-cat-photo">
            <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
            <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
            <label><input type="checkbox" name="personality" checked> Loving</label>
            <label><input type="checkbox" name="personality"> Lazy</label>
            <label><input type="checkbox" name="personality"> Energetic</label><br>
            <input type="text" placeholder="cat photo URL" required>
            <button type="submit">Submit</button>
        </form>
    </main>
    </body>
</html>
